/* stylelint-disable selector-max-specificity -- cell and column borders have
    lots of overlapping rules defined in different files that rely on different
    specificities to work, one day it would be good to tackle this and properly
    refactor border styles to be less specific */

.ag-cell-range-selected:not(.ag-cell-focus),
.ag-cell-range-selected.ag-cell-range-chart,
.ag-body-viewport:not(.ag-has-focus) .ag-cell-range-single-cell:not(.ag-cell-inline-editing) {
    background-color: var(--ag-range-selection-background-color);

    &.ag-cell-range-chart {
        background-color: var(--ag-range-selection-chart-background-color) !important;

        &.ag-cell-range-chart-category {
            background-color: var(--ag-range-selection-chart-category-background-color) !important;
        }
    }
}

.ag-cell-range-selected-1:not(.ag-cell-focus),
.ag-cell-range-selected-1.ag-cell-range-chart,
.ag-root:not(.ag-context-menu-open)
    .ag-body-viewport:not(.ag-has-focus)
    .ag-cell-range-selected-1:not(.ag-cell-inline-editing) {
    background-color: var(--ag-range-selection-background-color);
}

.ag-cell-range-selected-2:not(.ag-cell-focus),
.ag-cell-range-selected-2.ag-cell-range-chart {
    /* use background-image to overlay a semi transparent color over the background-color */
    background-image: linear-gradient(
        var(--ag-range-selection-background-color),
        var(--ag-range-selection-background-color)
    );
}

.ag-cell-range-selected-3:not(.ag-cell-focus),
.ag-cell-range-selected-3.ag-cell-range-chart {
    /* use background-image to overlay 2 layers of a semi transparent color over the background-color */
    background-image: linear-gradient(
            var(--ag-range-selection-background-color),
            var(--ag-range-selection-background-color)
        ),
        linear-gradient(var(--ag-range-selection-background-color), var(--ag-range-selection-background-color));
}

.ag-cell-range-selected-4:not(.ag-cell-focus),
.ag-cell-range-selected-4.ag-cell-range-chart {
    /* use background-image to overlay 3 layers of a semi transparent color over the background-color */
    background-image: linear-gradient(
            var(--ag-range-selection-background-color),
            var(--ag-range-selection-background-color)
        ),
        linear-gradient(var(--ag-range-selection-background-color), var(--ag-range-selection-background-color)),
        linear-gradient(var(--ag-range-selection-background-color), var(--ag-range-selection-background-color));
}

.ag-cell.ag-cell-range-selected:not(.ag-cell-range-single-cell) {
    &.ag-cell-range-top {
        border-top-color: var(--ag-range-selection-border-color);
        border-top-style: var(--ag-range-selection-border-style);
    }

    &.ag-cell-range-right {
        /* rtl:ignore */
        border-right-color: var(--ag-range-selection-border-color);
        /* rtl:ignore */
        border-right-style: var(--ag-range-selection-border-style);
    }

    &.ag-cell-range-bottom {
        border-bottom-color: var(--ag-range-selection-border-color);
        border-bottom-style: var(--ag-range-selection-border-style);
    }

    &.ag-cell-range-left {
        /* rtl:ignore */
        border-left-color: var(--ag-range-selection-border-color);
        /* rtl:ignore */
        border-left-style: var(--ag-range-selection-border-style);
    }
}

.ag-cell.ag-selection-fill-top,
.ag-cell.ag-selection-fill-top.ag-cell-range-selected {
    border-top: 1px dashed;
    border-top-color: var(--ag-range-selection-border-color);
}

.ag-cell.ag-selection-fill-right,
.ag-cell.ag-selection-fill-right.ag-cell-range-selected {
    border-right: 1px dashed var(--ag-range-selection-border-color) !important;
}

.ag-cell.ag-selection-fill-bottom,
.ag-cell.ag-selection-fill-bottom.ag-cell-range-selected {
    border-bottom: 1px dashed;
    border-bottom-color: var(--ag-range-selection-border-color);
}

.ag-cell.ag-selection-fill-left,
.ag-cell.ag-selection-fill-left.ag-cell-range-selected {
    border-left: 1px dashed var(--ag-range-selection-border-color) !important;
}

.ag-fill-handle,
.ag-range-handle {
    position: absolute;
    width: 6px;
    height: 6px;
    bottom: -1px;
    right: -1px;
    background-color: var(--ag-range-selection-border-color);
}

.ag-fill-handle {
    cursor: crosshair;
}

.ag-range-handle {
    cursor: nwse-resize;
}
